<script setup lang="ts">
defineProps({
  label: {
    type: String,
    default: '查看详情',
    required:false
  }
})
</script>

<template>
  <div class="cp-learn-more">
    <span>{{ label }}</span>
    <img class="black" src="~/assets/icons/more_right_black.png">
    <img class="white" src="~/assets/icons/more_right_white.png">
  </div>
</template>

<style scoped lang="scss">
.cp-learn-more {
  width: 1.73rem;
  height: 0.51rem;
  border-radius: 0.31rem;
  border: 0.01rem solid #999999;
  font-size: 0.15rem;
  font-weight: bold;
  color: #111111;
  padding-left: 0.43rem;
  line-height: 0.51rem;
  display: flex;
  align-items: center;
  cursor: pointer;

  img {
    width: 0.07rem;
    height: 0.11rem;
    margin-left: 0.23rem;
  }

  .white {
    display: none;
  }

  &:hover {
    color: #fff;
    background: linear-gradient(61deg, #47FFDA 0%, #2E6AFF 100%);
    border: none;

    .white {
      display: inline-block;
    }

    .black {
      display: none;
    }
  }
}
</style>
